<template>
  <div class="template">
     <div class="search">
      <div class="search-center">
        <div class="search-item">
            <Input clearable
            v-model="search.phone"
            placeholder="手机号"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.realname"
            placeholder="真实姓名"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Select clearable
                style="width:100px;"
                v-model="search.status"
                :label-in-value="true"
                placeholder="状态"
                class="select"
              >
             <Option value="-1" label="提现失败"></Option>
             <Option value="1" label="申请提现"></Option>
             <Option value="10" label="提现成功"></Option>
            </Select>
        </div>
        <!-- 日期范围选择 -->
        <div class="search-item">
          <DatePicker
            type="daterange"
            v-model="search.dateRange"
            placeholder="选择日期范围"
            style="width: 200px"
          ></DatePicker>
        </div>

         <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button>
           <!-- 导出按钮 -->
        <Button
          style="width: 80px;margin-bottom:5px"
          type="primary"
          icon="ios-download-outline"
          @click="exportData"
        >导出</Button>
      </div>    
    </div>
    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>

  </div>
</template>

<script>
import {apiCashoutlogList,apiCashoutlogExport} from '@/api/withdrawal-manage.js'
import { getDateTime } from '@/libs/util'
export default {
  name: 'withdrawal-manage',
  data () {
    return {
        query:{},
      search: {
        cashOutNo:'',
        trancId:'',
        realname:'',
        phone:'',
        status:'',
        pageNo: 1,
        pageSize: 10,
         dateRange: [],   // 日期范围
      },
      diyDom:{
        showModal:false
      },
      diyData: {
        columns: [
 
           {
            title: '昵称',
            key:'nickname',
          },
          {
            title: '手机号',
           key: 'phone',
          },
          {
            title: '真实姓名',
            key: 'realname',
          },
          {
            title: '提现金额',
            key: 'amount',
          },
          {
            title: '积分余额',
            key: '',
          },
          {
            title: '申请时间',
            key: 'createTime',
          },
          {
            title: '状态',
             key: 'status',
             render: (h, params) => {
              var html = []
              switch (params.row.status) {
                case -1:
                  html.push(h('span',{
                    style: {color:'#808080',
}
                  },'提现失败'))
                  break
                case 1:
                  html.push(h('p',{
                    style:{color:'#FF5733'}
                  },'申请提现'))
                break
                 case 10:
                  html.push(h('p',{
                    style:{color:'#2A82E4'}
                  },'提现成功'))
              }
             }
          },
          {
            title: '处理时间',
            key: 'completeTime',
          },
          {
            title: '操作',
            width:'150px',
            fixed: 'right',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                      props: {
                        size: 'small',
                      },
                      style:{
                          marginRight:'10px',
                          fontSize:'14px',
                          display:params.row.status==1?'':'none',
                      },
                      on: {
                          click: () => {
                             
                          }
                      },                            
                    },
                   '审核'
                ),
                h('Button', {
                      props: {
                        size: 'small',
                      },
                      style:{
                          marginRight:'10px',
                          fontSize:'14px',
                      },
                      on: {
                          click: () => {
                             
                          }
                      },                            
                    },
                   '查看记录'
                ),
                  
              ])
            }
        }
        ]
      },
      apiData: {
        total: 0,
        tableList: [], 
      }
    }      
  },
  methods: {
        // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    getTableList(){
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search,...this.query }
       // 处理日期范围参数
      if (this.search.dateRange && this.search.dateRange.length === 2) {
        opt.createTimeBegin = getDateTime(this.search.dateRange[0])
        opt.createTimeEnd = getDateTime(this.search.dateRange[1])
      }
      delete opt.dateRange
      apiCashoutlogList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data
        
        this.apiData.tableList = list
        this.apiData.total = totalCount
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
     // 导出数据处理
    exportData() {
      var opt = { ...this.search, ...this.query }
      
      // 处理日期范围参数
      if (this.search.dateRange && this.search.dateRange.length === 2) {
      opt.createTimeBegin = getDateTime(this.search.dateRange[0])
        opt.createTimeEnd = getDateTime(this.search.dateRange[1])
      }
      delete opt.dateRange

     this.$store.commit('setSpinShow', true)
				apiCashoutlogExport({...this.search}).then(res => {
						// this.diyDom.showExport = false
						const { data } = res
						const blob = new Blob([data])
						let disposition = decodeURI(res.headers['content-disposition'])
						// 从响应头中获取文件名称
						let fileName = disposition.substring(disposition.indexOf('fileName=') + 22, disposition.length)
						let text = fileName
						if ('download' in document.createElement('a')) {
							// 非IE下载
							const elink = document.createElement('a')
							elink.download = text.substring(0, text.length - 1)
							elink.style.display = 'none'
							elink.href = URL.createObjectURL(blob)
							document.body.appendChild(elink)
							elink.click()
							URL.revokeObjectURL(elink.href) // 释放URL 对象
							document.body.removeChild(elink)
						} else {
							// IE10+下载
							navigator.msSaveBlob(blob, fileName)
						}
					})
					.finally(() => this.$store.commit('setSpinShow', false))
    },
  },
   mounted () {
    this.query=this.$route.query
    this.getTableList()
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
  
}
</style>
 